<template>
  <div class="index">
    <h3 style="text-align: center; font-size: 24px; margin-top: 0">分类商品</h3>
    <hr />
    <div class="sort">
      <b>筛选产地:</b>
      <select onchange="searchc(this.value)">
        <option value="" selected="" disabled="" hidden="">请选择</option>

        <option>南充</option>

        <option>绵阳</option>

        <option>内江</option>

        <option>昆明</option>

        <option>遂宁</option>

        <option>衢州</option>

        <option>合肥</option>

        <option>揭阳</option>

        <option>成都</option>

        <option>重庆</option>

        <option>呼和浩特</option>
      </select>
    </div>
    <hr />
    <div class="row">
      <div>
        <div class="row-1">
          <a href=""><img src="../assets/img/wlf-h.jpg" alt="" /></a>
        </div>
        <div class="box">
          <p>丝丝香王凉粉(小岛二期水语郡超市)</p>
          <p>原味豌豆凉粉</p>
          <div style="margin-bottom: 15px">
            价格:
            <span style="color: #008180; font-size: 13px; font-weight: bold">￥7.0</span>
            <span style="text-decoration: line-through">原价:￥10.0</span>
          </div>
          <div class="btn">
            <div>
              <a href="" class="btn2">立即购买</a>
              <div style="
                  width: 20px;
                  height: 22px;
                  display: inline-block;
                  position: absolute;
                ">
                <a href=""></a>
              </div>
            </div>

            <div class="btn3">
              <span>100</span>
              <a href=""></a>
            </div>
          </div>
        </div>
      </div>
      <div class="row-2">
        <div>
          <div class="row-1">
            <router-link to="/Xch/detail?lid=20"><img style="width: 50%" src="../assets/img/1649257358942.jpg" alt="" />
            </router-link>
          </div>
          <div class="box">
            <p>紫玫瑰18枝➕ 波浪➕ 同款包装(兴挽flower)</p>
            <p class="p2">
              所有鲜花都是活鲜花不是干花 所有花的单件重量都是正常鲜花的重量....
            </p>
            <div style="margin-bottom: 15px">
              价格:
              <span style="color: #008180; font-size: 13px; font-weight: bold">￥119.0</span>
            </div>
            <div class="btn">
              <div>
                <a href="" class="btn2">立即购买</a>
                <div style="
                    width: 20px;
                    height: 22px;
                    display: inline-block;
                    position: absolute;
                  ">
                  <a href=""></a>
                </div>
              </div>

              <div class="btn3">
                <span>100</span>
                <a href=""></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row-3">
        <div>
          <div class="row-1">
            <a href=""><img style="width: 50%" src="../assets/img/image.jpg" alt="" /></a>
          </div>
          <div class="box">
            <p>百奇装饰饼干 巧克力味(左姐超市福镇店)</p>
            <p>百奇乐享棒棒年，财运棒棒</p>
            <div style="margin-bottom: 15px">
              价格:
              <span style="color: #008180; font-size: 13px; font-weight: bold">￥7.0</span>
            </div>
            <div class="btn">
              <div>
                <a href="" class="btn2">立即购买</a>
                <div style="
                    width: 20px;
                    height: 22px;
                    display: inline-block;
                    position: absolute;
                  ">
                  <a href=""></a>
                </div>
              </div>

              <div class="btn3">
                <span>100</span>
                <a href=""></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.index {
  width: 1140px;
  height: 500px;
  margin: 0 auto;
  padding: 30px;
  background: url("../assets/img/body_bg.jpg");
}

.sort b {
  padding-right: 7px;
  color: #6b6b6b;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.8125em;
}

.sort select {
  width: 140px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 0.8125em;
  color: #6b6b6b;
  font-weight: normal;
  padding: 5px;
}

.row {
  width: 1170px;
  height: 431px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

.row .row-1 {
  width: 292px;
  height: 340px;

  position: relative;
}

.row .row-1 img {
  width: 260px;
  height: 200px;
}

.box {
  width: 270px;
  height: 131px;
  display: block;
  color: #333;
  box-sizing: border-box;
  margin-top: -120px;
  font-size: 0.8125em;
  line-height: 1.5em;
}

.box p {
  padding: 0em 0em 0.1em;
  color: #000;
  line-height: 1.5em;
}

.p2 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  display: flex;
  justify-content: space-between;
}

.btn .btn2 {
  border: 1px solid #d2cf99;
  border-radius: 20px;
  background-color: #d2cf99;
  color: #1b242f;
  font-size: 0.75em;
  padding: 2px 8px;
  text-decoration: none;
  box-sizing: border-box;
  font-weight: bold;
}

.btn2:hover {
  color: red;
}

.btn2+div {
  background: url('../assets/img/img-sprite.png') #d84828 no-repeat -200px -10px;
  margin-left: 10px;
}

.btn3>a {
  background: url(../assets/img/img-sprite.png) no-repeat -45px -45px;
  width: 20px;
  height: 22px;
  float: right;
  margin-right: 5px;
  box-sizing: border-box;
}

.btn3>span {
  color: #555;
  font-size: 12px;
  vertical-align: text-top;
  text-decoration: none;
  float: right;
  box-sizing: border-box;
}
</style>
